'use client';

import { useRouter } from 'next/navigation';
import { useActionState, useEffect, useState } from 'react';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxButtonGroup } from '@fox/core/components/fox-button-group';
import { FoxButtonPanel } from '@fox/core/components/fox-button-panel';
import { FoxCard } from '@fox/core/components/fox-card';
import { FoxDescriptionList } from '@fox/core/components/fox-description-list';
import { FoxHelperText } from '@fox/core/components/fox-helper-text';
import { FoxInput } from '@fox/core/components/fox-input';
import { FoxPageHeader } from '@fox/core/components/fox-page-header';
import { FoxSelect } from '@fox/core/components/fox-select';
import { submitFormAction } from '@/app/_hooks/submit-form-action';
import { useBlockingAction } from '@/app/_hooks/use-blocking-action';
import { useFeedback } from '@/app/_hooks/use-feedback';
import type { CommonCode } from '@/lib/domain/common-code';
import {
  MERCHANT_DETAIL_VISIBILITY_OPTIONS,
  MERCHANT_VOUCHER_USE_OPTIONS,
  formatMerchantDetailStatusLabel,
  formatOptionalValue,
  type MerchantDetail,
  type MerchantDetailSummary,
} from '@/lib/domain/merchant-detail';
import {
  CLOSED_DAYS_MAX_LENGTH,
  DESCRIPTION_MAX_LENGTH,
  INITIAL_MERCHANT_DETAIL_FORM_STATE,
  SORT_ORDER_MAX,
} from '@/lib/domain/merchant-detail-form';
import { MERCHANT_DETAILS_PATH, merchantDetailPath } from '@/lib/domain/merchant-detail-query';
import type { MerchantProduct } from '@/lib/domain/merchant-product';
import { formatPhoneNumber } from '@/lib/domain/phone-number';
import {
  deleteMerchantDetailAction,
  saveMerchantDetailAction,
  updateMerchantDetailVisibilityAction,
} from '../../_actions';
import { MerchantChoiceChips } from '../../_components/merchant-choice-chips';
import { MerchantImageField } from '../../_components/merchant-image-field';
import { MerchantProductTable } from '../../_components/merchant-product-table';
import styles from './merchant-detail-form.module.scss';

interface MerchantDetailFormProps {
  /** 이 화면의 가맹점 — 업체명·연락처·주소의 출처. 상세 유무와 무관하게 늘 정해져 있다. */
  merchant: MerchantDetailSummary;
  /** 상세가 이미 있으면 그 값. 없으면 이 화면에서 처음 만든다. */
  detail?: MerchantDetail;
  products?: MerchantProduct[];
  categories: CommonCode[];
}

/**
 * 가맹몰 상세 — 기획 BO-MAL-002(등록)·003(수정)을 한 화면으로 합쳤다(사용자 확정). 목록의 행에서
 * 들어오며 `detail`이 있으면 고치고, 없으면 처음 만든다. 첫 저장 뒤에도 화면 구성은 그대로라
 * 바로 메뉴를 붙일 수 있고, 저장은 그 자리에 머문다.
 *
 * 업체명·연락처·우편번호·주소는 가맹점 원본이라 늘 읽기 전용이다(사용자 확정). 기획의 [주소 검색]은
 * 가맹점 관리 화면의 것이라 여기서는 값을 바꾸지 않는다.
 */
export function MerchantDetailForm({
  merchant,
  detail,
  products = [],
  categories,
}: MerchantDetailFormProps) {
  const router = useRouter();
  const { showAlert, hideAlert, showToast } = useFeedback();
  const [isBusy, startAction] = useBlockingAction();
  const [state, formAction, isPending] = useActionState(
    saveMerchantDetailAction,
    INITIAL_MERCHANT_DETAIL_FORM_STATE
  );
  const isEdit = detail !== undefined;
  const errors = state.status === 'error' ? (state.errors ?? {}) : {};

  const frcsNo = merchant.id;
  const [categoryCode, setCategoryCode] = useState(detail?.categoryCode ?? '');
  const [visibility, setVisibility] = useState<string[]>([
    detail?.isVisible === false ? 'N' : 'Y',
  ]);
  const [voucherUse, setVoucherUse] = useState<string[]>(['Y']);

  useEffect(() => {
    if (state.status !== 'success') return;
    if (state.created) {
      showToast({ variant: 'success', message: '등록했습니다. 이어서 메뉴를 추가할 수 있습니다.' });
      router.replace(merchantDetailPath(state.frcsNo));
    } else {
      showToast({ variant: 'success', message: '저장했습니다.' });
      router.refresh();
    }
  }, [state, router, showToast]);

  function toggleVisibility() {
    if (!detail) return;
    const next = detail.isVisible === false;
    startAction(async () => {
      const result = await updateMerchantDetailVisibilityAction(detail.id, next);
      showToast(
        result.status === 'error'
          ? { variant: 'danger', message: result.message }
          : { variant: 'success', message: next ? '노출로 바꿨습니다.' : '비활성으로 바꿨습니다.' }
      );
    });
  }

  function runDelete() {
    if (!detail) return;
    hideAlert();
    startAction(async () => {
      const result = await deleteMerchantDetailAction(detail.id);
      if (result.status === 'error') {
        showToast({ variant: 'danger', message: result.message });
        return;
      }
      showToast({ variant: 'success', message: '삭제했습니다.' });
      router.push(MERCHANT_DETAILS_PATH);
    });
  }

  function confirmDelete() {
    if (!detail) return;
    showAlert({
      variant: 'danger',
      title: '가맹몰 상세를 삭제하시겠습니까?',
      message: `"${detail.name}"의 상세 정보를 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.`,
      actions: (
        <FoxButtonGroup size="md">
          <FoxButton type="default" size="md" label="취소" onAction={hideAlert} />
          <FoxButton type="primary" size="md" label="삭제" onAction={runDelete} />
        </FoxButtonGroup>
      ),
    });
  }

  return (
    <>
      <FoxPageHeader
        title="가맹몰 상세 정보"
        description="지역상생몰에 노출할 업체의 상세를 등록·수정한다. 저장 즉시 앱에 반영된다"
        breadcrumb={[
          { label: '홈', href: '/' },
          { label: '관리자관리' },
          { label: '가맹몰 상세 관리', href: MERCHANT_DETAILS_PATH },
          { label: '상세 정보' },
        ]}
      />

      <form
        id="merchant-detail-form"
        onSubmit={(event) => submitFormAction(event, formAction)}
        className={styles.form}
      >
        <input type="hidden" name="frcsNo" value={frcsNo} />
        <input type="hidden" name="mode" value={isEdit ? 'edit' : 'create'} />

        <FoxCard size="lg" title="기본 정보" className={styles.section}>
          <div className={styles.grid}>
            <div className={styles.fieldWide}>
              <FoxInput size="md" label="업체명" requirement="required" value={merchant.name} readOnly state="view" />
            </div>
            <div className={styles.field}>
              <FoxSelect
                size="md"
                label="카테고리"
                requirement="required"
                placeholder="선택"
                options={categories.map((code) => ({ value: code.code, label: code.label }))}
                value={categoryCode}
                onValueChange={setCategoryCode}
                error={Boolean(errors.categoryCode)}
              />
              <input type="hidden" name="categoryCode" value={categoryCode} />
              {errors.categoryCode && <FoxHelperText type="danger" message={errors.categoryCode} />}
            </div>
            <div className={styles.field}>
              <FoxInput
                size="md"
                label="업체 연락처"
                requirement="required"
                value={formatOptionalValue(formatPhoneNumber(merchant.phoneNumber))}
                readOnly
                state="view"
              />
            </div>
          </div>

          <div className={styles.grid}>
            <div className={styles.fieldNarrow}>
              <FoxInput size="md" label="우편번호" requirement="required" value={formatOptionalValue(detail?.postalCode)} readOnly state="view" />
            </div>
            <div className={styles.fieldWide}>
              <FoxInput size="md" label="주소" value={formatOptionalValue(merchant.address)} readOnly state="view" />
            </div>
            <div className={styles.field}>
              <FoxInput size="md" label="상세주소" value={formatOptionalValue(merchant.addressDetail)} readOnly state="view" />
            </div>
          </div>

          <div className={styles.grid}>
            <div className={styles.fieldWide}>
              <FoxInput
                size="md"
                name="description"
                label="한줄 소개"
                placeholder="앱 목록·상세에 노출되는 한 줄 설명"
                defaultValue={detail?.description ?? ''}
                maxLength={DESCRIPTION_MAX_LENGTH}
                invalid={Boolean(errors.description)}
                message={errors.description}
              />
            </div>
            <div className={styles.fieldNarrow}>
              <FoxInput
                size="md"
                name="openTime"
                type="time"
                label="영업 시작"
                defaultValue={detail?.openTime ?? ''}
                invalid={Boolean(errors.openTime)}
                message={errors.openTime}
              />
            </div>
            <div className={styles.fieldNarrow}>
              <FoxInput
                size="md"
                name="closeTime"
                type="time"
                label="영업 종료"
                defaultValue={detail?.closeTime ?? ''}
                invalid={Boolean(errors.closeTime)}
                message={errors.closeTime}
              />
            </div>
            <div className={styles.field}>
              <FoxInput
                size="md"
                name="closedDays"
                label="휴무일"
                placeholder="예) 매주 월요일"
                defaultValue={detail?.closedDays ?? ''}
                maxLength={CLOSED_DAYS_MAX_LENGTH}
                invalid={Boolean(errors.closedDays)}
                message={errors.closedDays}
              />
            </div>
          </div>

          <div className={styles.grid}>
            <MerchantChoiceChips
              label="노출 상태"
              name="isVisible"
              required
              options={MERCHANT_DETAIL_VISIBILITY_OPTIONS}
              values={visibility}
              onChange={setVisibility}
            />
            <MerchantChoiceChips
              label="바우처 사용"
              name="isVoucherUsable"
              required
              options={MERCHANT_VOUCHER_USE_OPTIONS}
              values={voucherUse}
              onChange={setVoucherUse}
            />
            <div className={styles.fieldNarrow}>
              <FoxInput
                size="md"
                name="sortOrder"
                type="number"
                inputMode="numeric"
                min={0}
                max={SORT_ORDER_MAX}
                label="노출 순서"
                placeholder="숫자 (낮을수록 상단)"
                defaultValue={detail?.sortOrder == null ? '' : String(detail.sortOrder)}
                invalid={Boolean(errors.sortOrder)}
                message={errors.sortOrder}
              />
            </div>
          </div>
        </FoxCard>

        <FoxCard
          size="lg"
          title="이미지 등록"
          description="대표 1장 필수 · 추가 최대 11장 (앱 슬라이더 최대 12장)"
          className={styles.section}
        >
          {/* 저장으로 파일 id가 바뀌면 다시 마운트해 칸 상태를 서버 값으로 되돌린다. */}
          <MerchantImageField
            key={`${detail?.thumbnailFileId ?? ''}/${detail?.imageFileId ?? ''}`}
            defaultThumbnailUrl={detail?.thumbnailUrl ?? null}
            retainedThumbnailId={detail?.thumbnailFileId ?? null}
            defaultImageUrls={detail?.imageUrls ?? []}
            retainedImageFileId={detail?.imageFileId ?? null}
            thumbnailError={errors.thumbnail}
            imagesError={errors.images}
          />
        </FoxCard>

        <FoxCard
          size="lg"
          title="메뉴 정보"
          description="앱 상세 화면의 메뉴 목록에 노출된다"
          className={styles.section}
        >
          <MerchantProductTable frcsNo={frcsNo} products={products} canAdd={isEdit} />
        </FoxCard>

        {detail && (
          <FoxCard size="lg" title="등록 정보" className={styles.section}>
            <FoxDescriptionList
              layout="inline"
              items={[
                { key: 'registeredAt', term: '등록일시', description: formatOptionalValue(detail.registeredAt) },
                { key: 'registeredBy', term: '등록자', description: formatOptionalValue(detail.registeredBy) },
                {
                  key: 'modified',
                  term: '최종 수정',
                  description: [detail.modifiedAt, detail.modifiedBy]
                    .filter((value): value is string => Boolean(value))
                    .join(' / ') || '-',
                },
                { key: 'status', term: '현재 상태', description: formatMerchantDetailStatusLabel(detail) },
              ]}
            />
          </FoxCard>
        )}

        {state.status === 'error' && state.message && (
          <FoxHelperText type="danger" message={state.message} />
        )}

        <FoxButtonPanel>
          <FoxButtonGroup size="lg">
            {detail && (
              <>
                <FoxButton type="default" size="lg" label="삭제" disabled={isBusy} onAction={confirmDelete} />
                <FoxButton
                  type="default"
                  size="lg"
                  label={detail.isVisible === false ? '노출' : '비활성'}
                  disabled={isBusy}
                  onAction={toggleVisibility}
                />
              </>
            )}
            <FoxButton
              type="default"
              size="lg"
              label="취소"
              onAction={() => router.push(MERCHANT_DETAILS_PATH)}
            />
            <FoxButton
              type="primary"
              size="lg"
              htmlType="submit"
              label={isEdit ? '저장' : '등록'}
              loading={isPending}
            />
          </FoxButtonGroup>
        </FoxButtonPanel>
      </form>
    </>
  );
}